<template>
  <view class="page">
    <!-- 使用 z-paging 实现滚动和分页 -->
    <z-paging ref="paging" v-model="strategyList" :fixed="true" safe-area-inset-bottom :default-page-size="10"
      :auto-show-back-to-top="true" :refresher-enabled="true" :loading-more-enabled="true"
      :auto="false" @query="queryList">
      <!-- 顶部固定内容 -->
      <template #top>

      </template>
      <view class="section">
        <text class="h1">{{ tacticsDetail.strategyName }}</text>
        <text class="desc">
          {{ tacticsDetail.description }}
        </text>
      </view>

      <view class="card card--plain">
        <view class="row">
          <text class="row-label">策略状态</text>
          <text class="row-value primary">{{ tacticsDetail.subscribeStatus ? '订阅中' : '未订阅' }}</text>
        </view>
        <view class="row">
          <text class="row-label">订阅剩余</text>
          <text class="row-value">{{ getExpireTime() || 0 }}天</text>
        </view>
        <view class="row clickable-row" @click="gotoPushSetting">
          <text class="row-label">推送设置</text>
          <view class="row-value arrow-right">
            <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
          </view>
        </view>
        <view class="tip">
          注：关闭策略后，APP将不在推送该策略。想要收到实时推送，请重新打开
        </view>
      </view>

      <view class="card card--plain" v-if="tacticsId == 13">
        <text class="sub-title">最近成功预警</text>
        <view class="last-alert">
          <template v-if="lastSuccess">
            <view class="last-time-wrapper">
              <view class="last-date">{{ formatSuccessDate(lastSuccess.time) }}</view>
              <view class="last-time">{{ formatSuccessTimeOnly(lastSuccess.time) }}</view>
            </view>
            <view class="last-text danger">
              {{ formatSuccessText(lastSuccess) }}
            </view>
          </template>
          <template v-else>
            <view class="last-text secondary">暂无成功预警记录</view>
          </template>
        </view>
      </view>

      <view class="card card--plain">
        <text class="sub-title">策略提醒通知观察</text>
        <text class="desc small">观察数据有延迟，获取实时提醒可订阅此策略</text>
        <text class="desc small warning">*数据仅供参考，不做任何投资建议*</text>

        <!-- 币种选择 - strategyId === 21 不显示币种选择 -->
        <scroll-view scroll-x class="chips horizontal" v-if="Number(tacticsId) !== 21">
          <view class="chips-content" v-if="pairs.length > 0">
            <view v-for="pair in pairs" :key="pair.currencyCode" class="chip" :class="{ active: isPairSelected(pair) }"
              @click="onSelectPair(pair)">
              {{ pair.currencyCode }}
            </view>
          </view>
        </scroll-view>

        <!-- 周期选择 - 单选，用于数据筛选 -->
        <scroll-view scroll-x class="chips horizontal">
          <view class="chips-content" v-if="intervals.length > 0">
            <view v-for="it in intervals" :key="it.value" class="chip" :class="{ active: isIntervalSelected(it.value) }"
              @click="onSelectInterval(it.value)">
              {{ it.label }}
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 策略交易卡片列表 -->
      <view 
        v-for="(strategy, index) in strategyList" 
        :key="strategy.id || index" 
        :id="`strategy-card-${index}`"
        class="strategy-card-wrapper">
        <StrategyCard :strategy="strategy" :strategyId="Number(tacticsId)"/>
      </view>
    </z-paging>
  </view>
</template>

<script>
import PushCard from '@/components/PushCard.vue'
import StrategyCard from '@/components/StrategyCard.vue'
import {
  getStrategyHistories,
  getStrategyDetail,
  getPeriods,
  getCurrencyPrice,
  getCurrencies,
  setStrategyPush,
  cancelStrategyPush
} from '@/api/tactics'
export default {
  components: { PushCard, StrategyCard },
  data() {
    const sys = uni.getSystemInfoSync()
    const statusBarPx = sys.statusBarHeight || 0
    const navHeightPx = statusBarPx + 44
    return {
      statusBarPx,
      navHeightPx,
      bottomSafePx: sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0,
      pushOn: true,
      pairs: [],
      activePair: null, // 单选：当前选中的币种对象
      intervals: [],
      activeInterval: null, // 保留用于数据筛选
      lastSuccess: null,
      tacticsId: 0,
      tacticsDetail: {},
      strategyList: [], // z-paging 绑定的数据列表
      pushCurrencyId: null, // 从推送消息接收的币种ID
      pushPeriodId: null, // 从推送消息接收的周期ID
      pushEntryStrategyId: null, // 从推送消息接收的策略进场ID
      shouldScrollToTarget: false, // 标记是否需要滚动到目标位置
      needRefresh: false, // 标记是否需要刷新数据
      isDataLoaded: false, // 标记数据是否已加载
      isInitializing: false, // 标记是否正在初始化（防止watch触发reload）
      lastQueryTime: 0, // 记录上次查询时间，用于防抖
    }
  },
  watch: {
    activePair: {
      handler(newVal, oldVal) {
        console.log('🔍 activePair watch 触发', {
          isInitializing: this.isInitializing,
          isDataLoaded: this.isDataLoaded,
          newVal: newVal?.currencyCode,
          oldVal: oldVal?.currencyCode
        })

        // 初始化期间不触发reload，避免重复请求
        if (this.isInitializing) {
          console.log('⏸️ 初始化期间，跳过 activePair watch 触发的 reload')
          return
        }

        // 只有在数据已加载且值真正改变时才重新加载
        if (this.isDataLoaded && this.$refs.paging) {
          console.log('🔄 activePair 变化，触发 reload')
          this.$refs.paging.reload()
        }
      },
      deep: true
    },
    activeInterval: {
      handler(newVal, oldVal) {
        console.log('🔍 activeInterval watch 触发', {
          isInitializing: this.isInitializing,
          isDataLoaded: this.isDataLoaded,
          newVal,
          oldVal
        })

        // 初始化期间不触发reload，避免重复请求
        if (this.isInitializing) {
          console.log('⏸️ 初始化期间，跳过 activeInterval watch 触发的 reload')
          return
        }

        // 只有在数据已加载且值真正改变时才重新加载
        if (this.isDataLoaded && this.$refs.paging) {
          console.log('🔄 activeInterval 变化，触发 reload')
          this.$refs.paging.reload()
        }
      }
    },
  },
  created() {
    const storedPush = uni.getStorageSync('tactics_push_on')
    if (storedPush !== '' && storedPush !== undefined) {
      this.pushOn = !!storedPush
    }
  },
  onLoad(options) {
    console.log('页面参数:', options);
    this.tacticsId = options.id

    // 接收推送消息传递的币种和周期参数，用于回显
    if (options.currencyId) {
      this.pushCurrencyId = Number(options.currencyId)
      console.log('接收到推送的币种ID:', this.pushCurrencyId)
    }
    if (options.periodId) {
      this.pushPeriodId = Number(options.periodId)
      console.log('接收到推送的周期ID:', this.pushPeriodId)
    }
    if (options.entryStrategyId) {
      this.pushEntryStrategyId = Number(options.entryStrategyId)
      this.shouldScrollToTarget = true // 标记需要滚动到目标位置
      console.log('接收到推送的进场策略ID:', this.pushEntryStrategyId)
    }

    // 只在onLoad时调用getData，避免重复请求
    this.getData()
  },
  onShow(){
    console.log('onShow 触发, needRefresh:', this.needRefresh, 'isDataLoaded:', this.isDataLoaded)

    // 优化：只有在需要刷新时才调用refreshData
    // 比如从推送设置页面返回时可能需要刷新状态
    if (this.needRefresh && this.isDataLoaded) {
      console.log('执行刷新数据')
      this.refreshData()
      this.needRefresh = false
    }
  },
  methods: {
    /**
     * z-paging 查询数据方法
     * @param {Number} pageNo - 页码
     * @param {Number} pageSize - 每页数量
     */
    async queryList(pageNo, pageSize) {
      // 如果正在初始化或数据未加载完成，不执行查询
      if (this.isInitializing || !this.isDataLoaded) {
        console.log('⏸️ 初始化中或数据未加载，跳过 queryList 调用')
        this.$refs.paging.complete(false)
        return
      }

      // 防抖：如果距离上次查询时间小于 300ms，跳过本次查询
      const now = Date.now()
      if (pageNo === 1 && now - this.lastQueryTime < 300) {
        console.log('⏸️ 防抖：距离上次查询时间过短，跳过本次调用')
        return
      }
      this.lastQueryTime = now

      try {
        console.log(`📡 调用 queryList - 页码: ${pageNo}, 每页: ${pageSize}`)

        // 构建请求参数
        const params = {
          pageSize: pageSize,
          pageNo: pageNo,
          strategyId: Number(this.tacticsId),
          startTime: '',
          endTime: '',
          search: ''
        }

        // strategyId === 21 不传递币种筛选，因为所有币种都按周期平铺展开
        // 如果有选中的币种，添加 currencyId（单个值）
        if (Number(this.tacticsId) !== 21 && this.activePair && this.activePair.id) {
          params.currencyId = Number(this.activePair.id)
        }

        // 如果有选中的周期，添加 periodId（单个值）
        if (this.activeInterval) {
          const selectedPeriod = this.intervals.find(it => it.value === this.activeInterval)
          if (selectedPeriod && selectedPeriod.id) {
            params.periodId = Number(selectedPeriod.id)
          }
        }

        console.log('📋 获取策略历史参数:', params)
        const res = await getStrategyHistories(params)

        if (res.code === 200 && res.data) {
          const records = res.data.records || []
          
          // 如果是第一次加载且传了 entryStrategyId，需要处理滚动
          if (pageNo === 1 && this.shouldScrollToTarget && this.pushEntryStrategyId) {
            console.log('✨ 检查是否需要滚动定位')
            console.log('- pushEntryStrategyId:', this.pushEntryStrategyId)
            console.log('- 返回记录数:', records.length)
            
            // 如果后端支持 entryStrategyId 参数，应该会返回包含目标记录的数据
            // 完成数据加载
            this.$refs.paging.complete(records)
            
            // 延迟执行滚动，确保 DOM 完全渲染
            setTimeout(() => {
              this.scrollToTargetStrategy(records)
            }, 600) // 延迟600ms，确保列表完全渲染
          } else {
            // 正常的分页加载
            this.$refs.paging.complete(records)
          }
        } else {
          this.$refs.paging.complete(false)
          uni.showToast({
            title: res.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载策略历史失败:', error)
        this.$refs.paging.complete(false)
        uni.showToast({
          title: error.message || '网络连接失败，请稍后重试',
          icon: 'none',
          duration: 2000,
        })
      }
    },

    async getData() {
      // 防止重复加载
      if (this.isDataLoaded) {
        console.log('数据已加载，跳过重复请求')
        return
      }

      try {
        console.log('开始加载策略详情数据...')

        // 标记正在初始化，防止watch触发reload
        this.isInitializing = true

        const detail = await getStrategyDetail({
          strategyId: this.tacticsId
        })
        this.tacticsDetail = detail.data
        console.log(detail, "策略详情数据");

        // 动态设置导航栏标题为策略名称
        if (this.tacticsDetail.strategyName) {
          uni.setNavigationBarTitle({
            title: this.tacticsDetail.strategyName
          })
        }

        // 如果是策略ID=13，获取最近成功预警数据
        if (this.tacticsId == 13) {
          await this.getLastSuccessAlert()
        }

        // 根据接口返回的订阅状态设置推送开关
        if (typeof this.tacticsDetail.subscribeStatus !== 'undefined') {
          this.pushOn = this.tacticsDetail.subscribeStatus
        }

        // 获取周期列表
        const periods = await getPeriods({
          strategyId: this.tacticsId
        })
        this.intervals = periods.data.records.map(item => {
          return {
            id: item.id,           // 保存周期ID
            label: item.cycleName,
            value: item.cycleCode
          }
        })

        // 根据推送参数或默认选择周期
        if (this.intervals.length > 0) {
          if (this.pushPeriodId) {
            // 如果有推送的周期ID，优先根据ID选择
            const targetPeriod = this.intervals.find(item => item.id === this.pushPeriodId)
            if (targetPeriod) {
              this.activeInterval = targetPeriod.value
              console.log('根据推送参数选择周期:', targetPeriod)
            } else {
              // 如果推送的周期ID找不到，使用默认逻辑
              this.setDefaultInterval()
            }
          } else {
            // 没有推送参数，使用默认逻辑
            this.setDefaultInterval()
          }
        }

        // 获取币种列表（strategyId === 21 不需要币种选择，但为了兼容性仍然获取）
        const currencieslist = await getCurrencies({
          pageSize: 1000,
          strategyId: this.tacticsId
        })
        this.pairs = currencieslist.data.records

        // strategyId === 21 不设置默认币种，因为所有币种都按周期平铺展开
        // 根据推送参数或默认选择币种
        if (Number(this.tacticsId) !== 21 && this.pairs.length > 0) {
          if (this.pushCurrencyId) {
            // 如果有推送的币种ID，优先根据ID选择
            const targetPair = this.pairs.find(pair => pair.id === this.pushCurrencyId)
            if (targetPair) {
              this.activePair = targetPair
              console.log('根据推送参数选择币种:', this.activePair)
            } else {
              // 如果推送的币种ID找不到，默认选择BTC
              this.setDefaultPair()
            }
          } else {
            // 没有推送参数，默认选择BTC
            this.setDefaultPair()
          }
        }

        console.log('✅ 策略详情数据加载完成')
        console.log('当前状态:', {
          activePair: this.activePair?.currencyCode,
          activeInterval: this.activeInterval
        })

        // 先标记初始化完成和数据已加载
        this.isInitializing = false
        this.isDataLoaded = true

        // 使用 $nextTick 确保所有状态更新完成后再触发加载
        this.$nextTick(() => {
          if (this.$refs.paging) {
            console.log('🚀 手动触发 z-paging 第一次加载')
            this.$refs.paging.reload()
          }
        })
      } catch (error) {
        console.error('❌ 加载策略详情数据失败:', error)
        // 即使失败也要重置初始化标记
        this.isInitializing = false
        uni.showToast({
          title: '加载策略详情失败',
          icon: 'none',
          duration: 2000
        })
      }
    },

    /**
     * 刷新数据（用于从其他页面返回时刷新）
     */
    async refreshData() {
      console.log('刷新策略详情数据...')
      try {
        const detail = await getStrategyDetail({
          strategyId: this.tacticsId
        })
        this.tacticsDetail = detail.data

        // 更新订阅状态
        if (typeof this.tacticsDetail.subscribeStatus !== 'undefined') {
          this.pushOn = this.tacticsDetail.subscribeStatus
        }

        // 如果是策略ID=13，更新最近成功预警
        if (this.tacticsId == 13) {
          await this.getLastSuccessAlert()
        }

        console.log('策略详情数据刷新完成')
      } catch (error) {
        console.error('刷新策略详情数据失败:', error)
      }
    },

    getExpireTime() {
      const time = this.tacticsDetail.expireTime
      const timeTotimer = new Date(time).getTime()
      const nowTime = Date.now()
      console.log(timeTotimer, nowTime);
      if (timeTotimer) {
        const resultTime = timeTotimer - nowTime
        console.log(resultTime / (3600 * 24) / 1000);
        return (resultTime / (3600 * 24) / 1000).toFixed(0)
      }
    },

    /**
     * 获取最近成功预警数据
     * 从 getStrategyHistories 接口获取，筛选 exitMsg.exitStatus === 'TAKE_PROFIT' 的记录
     */
    async getLastSuccessAlert() {
      try {
        console.log('开始获取最近成功预警数据...')

        // 调用接口获取历史记录
        const response = await getStrategyHistories({
          strategyId: this.tacticsId,
          pageNum: 1,
          pageSize: 50 // 获取最近50条记录，确保能找到成功的记录
        })

        if (response.code === 200 && response.data && response.data.records) {
          const records = response.data.records

          // 筛选出 exitMsg.exitStatus === 'TAKE_PROFIT' 的记录
          const successRecords = records.filter(record => {
              return record.operateType === 'CLOSE'
          })

          // 取最近的一条成功记录
          if (successRecords.length > 0) {
            const latestSuccess = successRecords[0]
            this.lastSuccess = latestSuccess

            console.log('最近成功预警数据:', this.lastSuccess)
          } else {
            console.log('未找到成功预警记录')
            this.lastSuccess = null
          }
        }
      } catch (error) {
        console.error('获取最近成功预警数据失败:', error)
        this.lastSuccess = null
      }
    },

    /**
     * 格式化成功预警时间 - 日期部分
     * 格式：2024-02-27
     */
    formatSuccessDate(timeStr) {
      if (!timeStr) return ''
      try {
        const date = new Date(timeStr)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      } catch (e) {
        return timeStr
      }
    },

    /**
     * 格式化成功预警时间 - 时间部分
     * 格式：04:15
     */
    formatSuccessTimeOnly(timeStr) {
      if (!timeStr) return ''
      try {
        const date = new Date(timeStr)
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        return `${hours}:${minutes}`
      } catch (e) {
        return timeStr
      }
    },

    /**
     * 格式化成功预警时间（保留原方法兼容）
     * 格式：2024-02-27 04:15:06
     */
    formatSuccessTime(timeStr) {
      if (!timeStr) return ''
      return timeStr
    },

    /**
     * 格式化成功预警文本
     * 格式：ETH/USDT异动预警（暴涨/跌）v1级提前20小时预警成功，预警内最大振幅达5.14%
     */
    formatSuccessText(record) {
      if (!record) return ''

      const symbol = record.symbol || ''
      const strategyName = record.strategyName || ''
      const periodName = record.periodName || ''

      // 计算盈利率
      let profitRate = 0
      if (record.profitRate !== undefined && record.profitRate !== null) {
        profitRate = Math.abs(record.profitRate)
      }

      return `${symbol}${strategyName}（暴涨/跌）提前${record.timeFormatHour}预警成功，预警内最大振幅达${profitRate.toFixed(2)}%`
    },

    async onTogglePush(e) {
      const newValue = e.detail.value

      try {
        uni.showLoading({ title: '处理中...', mask: true })

        if (newValue) {
          // 开启推送 - 调用 setStrategyPush（不传递币种和周期）
          const params = {
            strategyId: Number(this.tacticsId)
          }

          console.log('开启推送参数:', params)
          const res = await setStrategyPush(params)

          if (res.code === 200) {
            this.pushOn = true
            uni.setStorageSync('tactics_push_on', true)
            uni.showToast({ title: '已开启推送', icon: 'none' })
          } else {
            throw new Error(res.message || '开启推送失败')
          }
        } else {
          // 关闭推送 - 调用 cancelStrategyPush
          const res = await cancelStrategyPush(
            {
              strategyId: this.tacticsId
            }
          )

          if (res.code === 200) {
            this.pushOn = false
            uni.setStorageSync('tactics_push_on', false)
            // 清空选择的币种和周期（单选）
            this.activePair = null
            this.activeInterval = null
            uni.showToast({ title: '已关闭推送', icon: 'none' })
          } else {
            throw new Error(res.message || '关闭推送失败')
          }
        }
      } catch (error) {
        console.error('切换推送状态失败:', error)
        // 恢复到之前的状态
        this.pushOn = !newValue
        uni.showToast({
          title: error.message || '操作失败，请稍后重试',
          icon: 'none',
          duration: 2000
        })
      } finally {
        uni.hideLoading()
      }
    },
    // 判断币种是否已选中（单选）
    isPairSelected(pair) {
      if (!this.activePair) return false

      if (typeof this.activePair === 'object' && typeof pair === 'object') {
        return this.activePair.id === pair.id || this.activePair.currencyCode === pair.currencyCode
      }

      return false
    },

    // 判断周期是否已选中（单选）
    isIntervalSelected(value) {
      return this.activeInterval === value
    },

    // 选择币种（单选）
    onSelectPair(pair) {
      // 如果点击的是当前选中的币种，保持选中并刷新列表
      if (this.activePair && this.activePair.id === pair.id) {
        console.log('再次选中币种，刷新列表:', pair.currencyCode)
        // 手动触发刷新，因为值没有变化，watch 不会触发
        if (this.isDataLoaded && this.$refs.paging) {
          this.$refs.paging.reload()
        }
      } else {
        // 否则直接设置为选中（单选，覆盖之前的选择）
        console.log('选中币种:', pair.currencyCode)
        this.activePair = pair
        // watch 会自动触发 reload
      }
    },

    // 选择周期（单选）
    onSelectInterval(value) {
      // 如果点击的是当前选中的周期，保持选中并刷新列表
      if (this.activeInterval === value) {
        console.log('再次选中周期，刷新列表:', value)
        // 手动触发刷新，因为值没有变化，watch 不会触发
        if (this.isDataLoaded && this.$refs.paging) {
          this.$refs.paging.reload()
        }
      } else {
        // 否则直接设置为选中（单选，覆盖之前的选择）
        console.log('选中周期:', value)
        this.activeInterval = value
        // watch 会自动触发 reload
      }
    },

    /**
     * 跳转到推送设置页面
     */
    gotoPushSetting() {
      // 设置需要刷新标记，从推送设置页面返回时会刷新数据
      this.needRefresh = true
      uni.navigateTo({
        url: `/subPages/push/setting?id=${this.tacticsId}`
      })
    },

    /**
     * 设置默认币种：优先选择BTC，如果没有则选择第一个
     */
    setDefaultPair() {
      const btcPair = this.pairs.find(pair => pair.currencyCode === 'BTC')
      if (btcPair) {
        this.activePair = btcPair
        console.log('默认选择比特币:', this.activePair)
      } else {
        this.activePair = this.pairs[0]
        console.log('没有比特币，默认选择第一个币种:', this.activePair)
      }
    },

    /**
     * 设置默认周期：
     * - 策略ID为11（高低分）：默认选择30分钟
     * - 其他策略：默认选择第一个周期
     */
    setDefaultInterval() {
      // 高低分策略(id=11)特殊处理：默认选择30分钟
      if (Number(this.tacticsId) === 11) {
        // 尝试查找30分钟周期
        const period30min = this.intervals.find(item => 
          item.label === '30分钟' || 
          item.label === '30分' || 
          item.value === '30m' || 
          item.value === '30min'
        )
        if (period30min) {
          this.activeInterval = period30min.value
          console.log('高低分策略默认选择30分钟周期:', period30min)
        } else {
          // 如果找不到30分钟，使用第一个周期
          this.activeInterval = this.intervals[0].value
          console.log('未找到30分钟周期，默认选择第一个周期:', this.intervals[0])
        }
      } else {
        // 其他策略：默认选择第一个周期
        this.activeInterval = this.intervals[0].value
        console.log('默认选择第一个周期:', this.intervals[0])
      }
    },

    /**
     * 滚动到目标策略位置
     * @param {Array} records - 当前页的策略记录列表
     */
    scrollToTargetStrategy(records) {
      console.log('==== 开始滚动到目标策略 ====')
      console.log('目标 entryStrategyId:', this.pushEntryStrategyId)
      console.log('记录总数:', records ? records.length : 0)
      
      if (!records || records.length === 0) {
        console.log('没有数据，无需滚动')
        this.shouldScrollToTarget = false
        return
      }

      // 打印所有记录的 entryStrategyId，方便调试
      records.forEach((item, index) => {
        const entryId = item.entryMsg?.entryStrategyId
        console.log(`记录[${index}] entryStrategyId:`, entryId)
      })

      // 查找匹配的策略记录索引
      const targetIndex = records.findIndex(item => {
        // 优先匹配 entryMsg.entryStrategyId
        if (item.entryMsg && item.entryMsg.entryStrategyId) {
          const match = item.entryMsg.entryStrategyId === this.pushEntryStrategyId
          if (match) {
            console.log('找到匹配记录:', item)
          }
          return match
        }
        return false
      })

      console.log('查找结果 targetIndex:', targetIndex)

      if (targetIndex !== -1) {
        // 找到了目标策略，滚动到对应位置
        console.log(`✅ 找到目标策略，索引: ${targetIndex}，准备滚动`)
        this.scrollToIndex(targetIndex)
      } else {
        // 没有找到目标策略，滚动到第一条
        console.log('⚠️ 未找到目标策略，滚动到第一条')
        this.scrollToIndex(0)
      }

      // 重置标记，避免后续刷新时再次滚动
      this.shouldScrollToTarget = false
      console.log('==== 滚动处理完成 ====')
    },

    /**
     * 滚动到指定索引的策略卡片
     * @param {Number} index - 策略卡片的索引
     */
    scrollToIndex(index) {
      console.log(`🎯 开始滚动到索引: ${index}`)
      
      // 延迟执行，确保 DOM 完全渲染
      setTimeout(() => {
        if (!this.$refs.paging) {
          console.error('❌ z-paging 组件引用不存在')
          return
        }

        console.log('📐 直接使用计算方式滚动（最可靠）')
        this.scrollToIndexByCalculation(index)
      }, 1000) // 延迟1000ms，确保列表完全渲染
    },

    /**
     * 通过计算滚动到指定位置
     */
    scrollToIndexByCalculation(index) {
      console.log('📊 使用计算方式滚动, 索引:', index)
      
      // 每个策略卡片的高度估算（包含margin）
      // StrategyCard: margin 20rpx, card内容约320rpx
      const cardHeight = 360 // rpx

      // 计算目标位置（rpx转px）
      const systemInfo = uni.getSystemInfoSync()
      const rpxRatio = systemInfo.windowWidth / 750
      
      // 计算滚动距离
      const scrollTop = (index * cardHeight) * rpxRatio

      console.log(`📏 计算滚动参数:`)
      console.log(`- 卡片高度: ${cardHeight}rpx = ${cardHeight * rpxRatio}px`)
      console.log(`- 目标索引: ${index}`)
      console.log(`- 滚动距离: ${scrollTop}px`)
      console.log(`- 屏幕宽度: ${systemInfo.windowWidth}px`)
      console.log(`- rpx比例: ${rpxRatio}`)

      // 打印 paging 对象信息
      console.log('paging ref 存在:', !!this.$refs.paging)
      if (this.$refs.paging) {
        console.log('paging 类型:', typeof this.$refs.paging)
        
        // 尝试多种滚动方法
        const methods = ['scrollToY', 'scrollTo', 'scrollTop', 'setScrollTop']
        methods.forEach(method => {
          console.log(`- ${method}:`, typeof this.$refs.paging[method])
        })
      }

      // 方法1: scrollToY
      if (typeof this.$refs.paging.scrollToY === 'function') {
        console.log('✅ 使用 scrollToY 方法')
        this.$refs.paging.scrollToY(scrollTop, true)
        return
      }
      
      // 方法2: scrollTo
      if (typeof this.$refs.paging.scrollTo === 'function') {
        console.log('✅ 使用 scrollTo 方法')
        this.$refs.paging.scrollTo(scrollTop, true)
        return
      }
      
      // 方法3: setScrollTop
      if (typeof this.$refs.paging.setScrollTop === 'function') {
        console.log('✅ 使用 setScrollTop 方法')
        this.$refs.paging.setScrollTop(scrollTop, true)
        return
      }
      
      console.error('❌ 所有滚动方法都不可用')
    },

  },
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  background: #fff;
}

.section {
  padding: 16px;
}

.h1 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
}

.desc {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

.desc.small {
  color: #9aa0a6;
}

.desc.small.warning {
  color: #f5a623;
  font-weight: 500;
}

.card {
  padding: 12px 12px 6px;
  margin: 12px 12px 0;
  border-radius: 12px;
}

.card--plain {
  background: transparent;
  border-top: 1px solid #f0f0f0;
  box-shadow: none;
}

.sub-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.row-label {
  font-size: 14px;
  color: #333;
}

.row-value {
  font-size: 14px;
  color: #333;
}

.row-value.primary {
  color: #02c7b6;
}

.row-value.arrow-right {
  display: flex;
  align-items: center;
}

.clickable-row {
  cursor: pointer;
  transition: all 0.2s ease;

  &:active {
    opacity: 0.7;
    background: #f8f9fa;
  }
}

.tip {
  margin-top: 8px;
  font-size: 12px;
  color: #9aa0a6;
}

.last-alert {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 8px;
  gap: 16rpx;
}

.last-time-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  flex-shrink: 0;
}

.last-date {
  font-size: 24rpx;
  font-weight: 500;
  color: #e53935;
  line-height: 1.4;
}

.last-time {
  font-size: 24rpx;
  font-weight: 500;
  color: #e53935;
  line-height: 1.4;
}

.last-text {
  flex: 1;
  font-size: 26rpx;
  line-height: 1.5;
}

.last-text.danger {
  color: #e53935;
}

.last-text.secondary {
  color: #9aa0a6;
  font-size: 26rpx;
}

.chips {
  margin-top: 12px;
}

.chips.horizontal {
  overflow-x: hidden;
}

.chips-content {
  display: inline-flex;
  gap: 8px;
  padding: 2px 0;
}

.chip {
  padding: 6px 12px;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 999px;
}

.chip.active {
  color: #fff;
  background: #02c7b6;
  border-color: #02c7b6;
}

.disclaimer {
  margin: 16px 0;
  font-size: 12px;
  color: #9aa0a6;
  text-align: center;
}

.strategy-card-wrapper {
  width: 100%;
}
</style>
